<template>
  <div>
    <div class="header">
      <Header></Header>
    </div>
    <div class="wrap">
      <div class="wleft">
        <div class="swiper">
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="(item, index) in imgs" :key="index">
              <img :src="item" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="content">
          <div class="title"></div>
          <div class="text" v-html="text"></div>
          <div class="zan"></div>
          <div class="sendTime">
            发布于<span>{{ create_time }}</span>
          </div>
          <div class="comment">
            <div class="ctitle">笔记评论</div>
            <div class="incon">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="comment"
                maxlength="200"
                show-word-limit
              >
              </el-input>
            </div>
            <div class="cbot flex">
              <!-- <div class="coml"></div> -->
              <div class="sendcom"  @click="sendComment">
               发表
                 
              </div>
            </div>
            <div class="commentlist">
              <div class="xcp-list">
                <h2 class="xcp-list-title" v-if="comTotal > 0">
                  评论列表（{{ comTotal }}条）
                </h2>
                <div class="xcp-list-list">
                  <div>
                    <div
                      class="xcp-item"
                      v-for="(item,index) in commentList"
                      :key="item.id"
                      data-reply-id="1116252858209249118"
                    >
                      <div class="left">
                        <div class="x-avatar">
                          <div class="x-avatar-placeholder">
                            <el-avatar :src="item.pic"></el-avatar>
                          </div>
                        </div>
                      </div>
                      <div class="right">
                        <div class="user-bar">
                          <h5 class="user-bar-uname">{{ item.name }}</h5>
                        </div>

                        <div
                          class="x-interact-rich-text rich-text"
                          data-reply-id="1116252858209249118"
                        >
                          {{ item.content }}
                        </div>

                        <div
                          class="interact-bar"
                          data-reply-id="1116252858209249118"
                        >
                          <div class="interact-bar-left">
                            <span class="time">{{ item.time }}</span>
                            <span class="report">举报</span>
                          </div>
                          <div class="interact-bar-right">
                            <div class="reply">
                              <i class="icon reply-icon"></i>
                              <span class="reply-text" @click="reply(index)">回复</span>
                            </div>
                           
                          </div>
                        </div>
                        <div
                          id="reply-1116266059057462314"
                          style="padding-top: 17px"
                          v-if="isShowCom==index"
                        >
                          <div class="x-interact-publish">
                            <div class="x-interact-publish-cont incon">
                              <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="回复:"
                                v-model="commentfirst"
                                maxlength="200"
                                show-word-limit
                              >
                              </el-input>

                              <div class="other"></div>
                            </div>
                            <div class="x-interact-publish-panel-center"></div>
                            <div class="x-interact-publish-opt">
                              <span class="emoj"></span>

                              <span class="radio"></span>
                              <span class="extra"></span>
                              <span class="send disabled" @click="sendCommentFirst(item)">发表</span>
                            </div>
                            <div class="x-interact-publish-panel-bottom">
                              <div
                                id="reply-1116266059057462314_emoj_panel"
                                class="emoj-panel"
                              ></div>
                            </div>
                          </div>
                        </div>

                        <div>
                          <div class="xcp-list">
                            <div class="xcp-list-list is-second">
                              <div>
                                <div
                                  class="xcp-item"
                                  v-for="(it,init) in item.sub"
                                  :key="it.id"
                                  data-reply-id="1116266070409027813"
                                >
                                  <div class="left">
                                    <div class="x-avatar is-small">
                                      <div class="x-avatar-placeholder"></div>
                                      <el-avatar :src="it.pic"></el-avatar>
                                    </div>
                                  </div>
                                  <div class="right">
                                    <div class="user-bar">
                                      <h5 class="user-bar-uname">
                                        {{ it.name }}
                                      </h5>
                                    </div>

                                    <div
                                      class="x-interact-rich-text rich-text"
                                      data-reply-id="1116266070409027813"
                                    >
                                    
                                      <span class="type-text">{{
                                        it.content
                                      }}</span>
                                    </div>

                                    <div
                                      class="interact-bar"
                                      data-reply-id="1116266070409027813"
                                    >
                                      <div class="interact-bar-left">
                                        <span class="time">{{ it.time }}</span>
                                        <span class="delete">删除</span>
                                      </div>
                                      <div class="interact-bar-right" @click="replyScend(init)">
                                        <div class="reply">
                                          <i class="icon reply-icon"></i>
                                          <span class="reply-text">回复</span>
                                        </div>
                                      
                                      </div>
                                    </div>
                                    <div
                                      id="reply-1116266059057462314"
                                      style="padding-top: 17px"
                                      v-show="isShowReply==init"
                                    >
                                      <div class="x-interact-publish">
                                        <div
                                          class="x-interact-publish-cont incon"
                                        >
                                          <el-input
                                            type="textarea"
                                            :rows="2"
                                            placeholder="回复:"
                                            v-model="commentreply"
                                            maxlength="200"
                                            show-word-limit
                                          >
                                          </el-input>

                                          <div class="other"></div>
                                        </div>
                                        <div
                                          class="x-interact-publish-panel-center"
                                        ></div>
                                        <div class="x-interact-publish-opt" @click="replyComment(it)">
                                         
                                          <span class="send disabled"
                                            >发表</span
                                          >
                                        </div>
                                        <div
                                          class="x-interact-publish-panel-bottom"
                                        >
                                          <div
                                            id="reply-1116266059057462314_emoj_panel"
                                            class="emoj-panel"
                                          ></div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="comTotal>0" class="xcp-list-loader no-more" data-parent-id="0">
                  <span>没有更多啦</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="wright">
        <div class="twarp">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <div class="zuo">笔记作者</div>
            </div>
            <div class="aname flex">
              <div style="margin-right: 20px">
                <el-avatar :size="60" :src="user_info.pic"></el-avatar>
              </div>
              <div class="name">{{ user_info.name }}</div>
            </div>
            <div class="text flex">
              <div class="note">
                <div class="ntitle">笔记</div>
                <div class="notenum">{{ total }}</div>
              </div>
              <div class="note">
                <div class="ntitle">粉丝</div>
                <div class="notenum">{{ fans }}</div>
              </div>
              <div class="note">
                <div class="ntitle">获赞与收藏</div>
                <div class="notenum">{{ ds }}</div>
              </div>
            </div>
          </el-card>
        </div>
        <div class="bwrap">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <div class="ltitle">相关笔记</div>
            </div>
            <div v-for="item in list" :key="item.id" class="mynews flex">
              <div class="limg">
                <img
                  style="width: 100px; height: 100px"
                  :src="item.cover_one"
                  @click="goDetail(item)"
                />
              </div>
              <div class="rdesc">
                <div class="rtitle" @click="goDetail(item)">
                  {{ item.title }}
                </div>
                <div class="zan">
                  <i class="icon-fabulous" style="color: #999"></i>
                  <span>{{ item.dz }}</span>
                </div>
              </div>
            </div>
            <div
              class="load-more mr-bottom"
              v-if="total > newsNum"
              @click="loadMore"
            >
              查看更多
            </div>
            <div class="load-more mr-bottom" v-else>没有更多了</div>
          </el-card>
        </div>
      </div>
    </div>

    <el-dialog
      title="微信扫码"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <div style="width:258px;height:258px;margin:0 auto">
        <img src="../assets/erweima.jpg" alt="" />
      </div>
    </el-dialog>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      id: "",
      commentCount: "",
      dz: "",
      sc: "",
      isCang: "",
      imgs: "",
      isGuan: "",
      isSelf: "",
      isZan: "",
      is_hunya: "",
      is_video: "",
      text: "",
      title: "",
      uid: "",
      user_info: "",
      create_time: "",
      comment: "",
      token: "",
      fans: "",
      ds: "",
      list: [],
      total: "",
      newsNum: 5,
      centerDialogVisible: false,
      comTotal: "",
      avatarUrl: "",
      commentList: "",
      isShowCom:false,
      isShowReply:false,
      commentfirst:'',
      commentreply:''
      
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.token = localStorage.getItem("token");
    this.getDetail();
    this.getNewsComments();
  },
  methods: {
    getDetail() {
      let params = {
        aid: this.id,
        type: 1,
        token: this.token,
      };
      this.$axios
        .get("getNewsInfo", { params })
        .then((res) => {
          if (res.code == 1) {
            this.dz = res.data.dz;
            this.imgs = res.data.imgs;
            this.isCang = res.data.isCang;
            this.isGuan = res.data.isGuan;
            this.isZan = res.data.isZan;
            this.isSelf = res.data.isSelf;
            this.text = res.data.text;
            this.title = res.data.title;
            this.uid = res.data.uid;
            this.user_info = res.data.user_info;
            this.create_time = res.data.create_time;
            this.sc = res.data.sc;
            let uid = res.data.uid;
            this.getUserinfo(uid);
            this.getMyNewsList(uid);
          }
          console.log("xxx", res);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    getNewsComments() {
      let params = {
        aid: this.id,
        page: this.page,
        token: this.token,
      };
      this.$axios
        .get("getNewsComments", { params })
        .then((res) => {
          console.log("评论", res);
          this.comTotal = res.data.total;
          this.commentList = res.data.data;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    
    reply(index){
      console.log(111)
      this.isShowCom=index
    },
    replyScend(init){
       console.log(22)
      this.isShowReply=init
    },
    // 发布评论
    sendComment(){
      if(!this.token){
        this.$router.push({
          name:'Login'
        })
        return false
      }
       let params = {
        token: this.token,
        nid: this.id,
        type:0,
        contentStr:this.comment,
        to_uid:0
      };
      this.$axios
        .post("upcomment", params)
        .then((res) => {
          console.log("评论", res);
          this.$message.success('评论成功')
         this.getNewsComments()
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 回复评论
    sendCommentFirst(item){
       if(!this.token){
        this.$router.push({
          nmme:'Login'
        })
        return false
      }
       let params = {
        token: this.token,
        nid: this.id,
        type:item.id,
        contentStr:this.commentfirst,
        to_uid:0
      };
      this.$axios
        .post("upcomment", params)
        .then((res) => {
          console.log("评论", res);
          this.$message.success('评论成功')
         this.getNewsComments()
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    replyComment(it){
        if(!this.token){
        this.$router.push({
          nmme:'Login'
        })
        return false
      }
       let params = {
        token: this.token,
        nid: this.id,
        type:it.id,
        contentStr:this.commentreply,
        to_uid:it.uid
      };
      this.$axios
        .post("upcomment", params)
        .then((res) => {
          console.log("评论", res);
          this.$message.success('评论成功')
         this.getNewsComments()
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    getUserinfo(uid) {
      if (this.isSelf === 1) {
        var type = 1;
      } else {
        type = 2;
      }
      let params = {
        token: this.token,
        uid: uid,
        type: type,
      };
      this.$axios.get("getUserinfo", { params }).then((res) => {
        this.fans = res.data.fans;
        this.ds = res.data.ds;
      });
    },
    getMyNewsList(uid) {
      if (this.isSelf === 1) {
        var type = 0;
      } else {
        type = 1;
      }
      let params = {
        type: type,
        page: this.page,
        uid: uid,
      };
      this.$axios
        .get("getMyNewsList", { params })
        .then((res) => {
          this.list = res.data;
          this.total = res.msg;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    loadMore() {
      this.centerDialogVisible = true;
    },
    goDetail(item) {
      this.id = item.id;
      this.getDetail();
      this.getNewsComments();
    },
  },
};
</script>
<style>
.incon .el-textarea__inner {
  padding: 16px 16px 23px;
  width: 100%;
  resize: none;
  background: #f5f5f6;
  border-radius: 12px;
  border: none;
  color: #1f1f1f;
}
.incon .el-textarea .el-input__count {
  color: #222;
  background: #f5f5f6;
}
</style>
<style lang="less" scoped>
.wrap {
  max-width: 1300px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  .wleft {
    width: 860px;
    background: #fff;
    .content {
      text-align: left;
      padding: 20px;
      .sendTime {
        font-size: 16px;
        color: #999999;
      }
      .ctitle {
        font-size: 18px;
        font-weight: 600;
        margin-top: 20px;
        margin-bottom: 20px;
      }
      .cbot {
        margin: 10px;
        margin-bottom: 40px;
       
        
        color: #fff;
       
        .sendcom{
          width: 80px;
        height: 30px;
        line-height: 30px;
         text-align: center;
          border-radius: 20px;
          background: #4e6ef2;
        }


      }
    }
  }
  .wright {
    width: 400px;
    .twarp {
      .zuo,
      .name {
        font-size: 18px;
        font-weight: 600;
        text-align: left;
      }
      .aname {
        align-items: center;
      }

      .text {
        justify-content: space-between;
        margin-left: 10px;
        margin-right: 10px;
        padding-top: 10px;
        border-top: 1px solid #eee;
        .ntitle {
          font-weight: 600;
        }
      }
    }
    .bwrap {
      margin-top: 20px;
      text-align: left;
      .ltitle {
        font-size: 18px;
        font-weight: 600;
      }
      .mynews {
        margin-top: 10px;
        align-items: flex-end;
        .rdesc {
          margin-left: 10px;
        }
        .rtitle {
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
      .load-more {
        text-align: center;
        margin-top: 20px;
      }
      .mr-bottom {
        color: #f54b64;
      }
    }
  }
  .xcp-list-loader{
    text-align: center;
  }
}
.commentlist {
  .xcp-list-title {
    font-size: 18px;
    line-height: 1;
    color: #000;
  }
  .xcp-item {
    display: flex;
    flex-direction: row;
    padding-top: 28px;
    font-size: 14px;
    color: #222;
  }
  .xcp-item .left {
    width: 64px;
  }
  .x-avatar {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
  }
  .xcp-item .right {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 1%;
  }
  .user-bar {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .user-bar-uname {
    font-family: PingFangSC-Semibold;
    font-size: 13px;
    color: #222;
  }
  .x-interact-rich-text {
    padding-top: 10px;
    font: 14px/22px PingFangSC-Regular;
    text-align: justify;
    color: #222;
    word-break: break-all;
    word-wrap: break-word;
  }
  .interact-bar {
    position: relative;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-direction: row;
    padding-top: 8px;

    font-size: 13px;
    color: #9195a3;
  }
  .interact-bar-left {
    justify-content: flex-start;
  }
  .interact-bar-left .delete,
  .interact-bar-left .report {
    display: none;
    margin-left: 10px;
    cursor: pointer;
  }
  .interact-bar-right {
    display: flex;
    justify-content: flex-end;
    color: #222;
  }
  .interact-bar-right .reply {
    cursor: pointer;
  }
  .interact-bar-right .icon {
    width: 20px;
    height: 20px;
    margin-right: 3px;
  }

  .interact-bar-right .reply-icon {
    background-image: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/xcp-reply.png);
  }

  .interact-bar-right .icon {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
  }

  .interact-bar-right .like {
    cursor: pointer;
    margin-left: 16px;
  }

  .interact-bar-right .like,
  .interact-bar-right .reply {
    display: flex;

    align-items: center;
  }

  .interact-bar-right .icon {
    width: 20px;
    height: 20px;
    margin-right: 3px;
  }

  .interact-bar-right .like-icon {
    background-image: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/xcp-like.png);
  }

  .interact-bar-right .icon {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
  }
  .x-interact-publish {
    width: 100%;
    font-size: 13px;
    color: #222;
  }
  .x-interact-publish-cont {
    display: flex;
    height: 94px;
    width: 100%;
    background: #f5f5f6;
    border-radius: 12px;
  }
  .x-interact-publish .text-area {
    padding: 16px 16px 23px;
    width: 100%;
    resize: none;
    background: #f5f5f6;
    border-radius: 12px;
    border: none;
    color: #1f1f1f;
  }

  element.style {
  }

  .xcp-list * {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
  }

  .x-interact-publish-opt {
    position: relative;

    display: flex;
    height: 30px;

    align-items: center;
    margin-top: 12px;
  }
  .x-interact-publish .send {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background: #4e6ef2;
    border-radius: 15px;
    cursor: pointer;
  }

  .title {
    text-align: center;
  }
}
</style>
